<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>canvas初识</title>
</head>

<body>
    <canvas width="300" height="300" id="Mycanvas">

    </canvas>

    <script>
        //判断是否支持canvas
        let canvas = document.getElementById("Mycanvas");
        if (canvas.getContext) {
            console.log("你的浏览器支持画布");
            let ctx = canvas.getContext("2d");
            //画笔颜色
            ctx.strokeStyle = 'red';
            //绘制蓝色
            ctx.fillStyle = "#ff0000";
            ctx.fillRect(10, 10, 100, 100);
            //绘制半透明蓝色
            ctx.fillStyle = "rgba(0,0,255,0.5)";
            ctx.fillRect(30, 30, 100, 100);
            //绘制描边矩形
            ctx.strokeStyle = "#00FFFF";
            ctx.strokeRect(50, 50, 100, 100);
        } else {
            console.log("你的浏览器支持画布");
        }
    </script>
</body>
<!-- 
   getContext('2d')   //获取到2d对象,用于来绘制图形
   strokeStyle='red'  //描边颜色
   strokeRect()       //绘制描边
   fillStyle          //填充颜色
   fillRect(10, 10, 130, 130)  //绘制路径,值为:离x轴的距离,离y轴的距离,宽度,高度

   绘制半透明方法:
   ctx.fillStyle = "rgba(0,0,255,0.7)";
 -->

</html>